<template>
  <!-- IntendedMembers 意向会员 -->
  <PageContainer>
    <view class="container">
      <Header title="意向会员" :is-box-shadow="false" />
      <Paglist v-model="dataList" :is-init-api="true" @register="register" :scroll-top-bottom="200">
        <template v-for="v in dataList" :key="v.id">
          <view class="intended-member-item">
            <view class="member-info">
              <view class="member-info_avatar">
                <TImage :src="v.avatar" width="144rpx" height="180rpx" border-radius="10rpx" />
              </view>
              <view class="member-info_text">
                <view class="info-top">
                  <view class="user-name text-overflow-1">
                    <text>{{ v.userName }}</text>
                  </view>
                  <view class="user-phone">
                    {{ v.phonenumber }}
                  </view>
                  <image
                    class="make-phone-call"
                    src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/admin/icon-1.png"
                    @click="makePhoneCall(v.phonenumber)"
                  />
                </view>
                <view class="info-time">
                  <view>
                    <text>首次登录时间</text>
                    <text>{{ v.createTime }}</text>
                  </view>
                  <view>
                    <text>最后登录时间</text>
                    <text>{{ v.loginDate }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="member-item_bot">
              <view class="start-list">
                <text class="label">意向度</text>
                <template v-for="num in 5" :key="v">
                  <text :class="['ali-icon', v && num <= v.expectation && 'ali-icon_active']">
                    &#xe870;
                  </text>
                </template>
              </view>
              <view class="to-details" @click="toDetails(v.appUserId)">
                <text>查看详情</text>
              </view>
            </view>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  IntendedMembers  意向会员 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import { potentialClientPageList } from '@/api/admin';
  import type { PotentialClientPageListResult } from '@/api/admin/types';
  import Header from '@/components/Header/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { navigateTo } from '@/router';
  import { provide, ref } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { onPageScroll } from '@dcloudio/uni-app';

  provide('api', potentialClientPageList);

  const [register] = useConList();

  const dataList = ref<PotentialClientPageListResult[]>([]);

  function makePhoneCall(phoneNumber: string) {
    phoneNumber && uni.makePhoneCall({ phoneNumber });
  }

  function toDetails(appUserId: number) {
    navigateTo({ name: 'intendedDetails', options: { appUserId } });
  }

  provide('tabIsShow', null);
  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .intended-member-item {
    background-color: #fff;
    padding: 30rpx;
    padding-bottom: 0;
    margin-bottom: 30rpx;
    .member-info {
      display: flex;
      align-items: center;
      height: 180rpx;
      padding-bottom: 40rpx;
      border-bottom: 1px solid #dddddd;
      &_avatar {
        width: 144rpx;
        flex-shrink: 0;
        margin-right: 30rpx;
      }
      &_text {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .info-top {
          position: relative;
          .make-phone-call {
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        .user-name,
        .user-phone {
          color: #333;
          font-size: 28rpx;
        }
        .user-name {
          font-size: 32rpx;
          font-weight: bolder;
          margin-right: 80rpx;
        }
        .info-time {
          font-size: 24rpx;
          color: #aaabab;
        }
      }
    }
    .member-item_bot {
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .start-list {
        color: #808080;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        .label {
          margin-right: 12rpx;
        }
        .ali-icon {
          font-size: 28rpx;
          color: #dddddd;
        }
        .ali-icon_active {
          color: #ddd38a;
        }
      }
      .to-details {
        width: 142rpx;
        height: 42rpx;
        height: 40rpx;
        background: #e9e3b5;
        border-radius: 10rpx;
        font-size: 24rpx;
        color: #333333;
        text-align: center;
        line-height: 42rpx;
      }
    }
  }
</style>
